<template>
    <div :class="cardListClass" @click="click">
        <div class="card-name">
            <div v-if="level" class="level-value">LV.{{level}}</div>
            <TechIcon v-else-if="size === 'big'" :name="`${isNormal ? 'vip-gray' : 'vip'}`" :color="`${isNormal ? '#838A94' : '#8A6817'}`" />
            <div class="name">{{name}}</div>
            <div v-if="!isNormal" class="detail-info">{{detailValue}}</div>
        </div>
        <div class="card-link">
            <div v-if="value" class="value">{{value}}</div>
            <TechIcon v-if="!isNormal && value" name="arrow-golden" />
            <Button class="action-btn" v-if="haveButton" size="small" @click.stop="buttonAction">{{buttonText}}</Button>
        </div>
    </div>
</template>

<script>
import { Icon, Button } from 'vant';
import { TechIcon } from '@components/base';
export default {
    name: 'MemberCardList',
    components: {
        Icon,
        TechIcon,
        Button,
    },
    computed: {
        cardListClass() {
            const { isNormal, size } = this.$props;
            return `tech-member-card-list ${isNormal ? 'is-normal' : ''} card-list-${size}`;
        },
        detailValue() {
            const { balance, discount, integral } = this.$props;
            let text = '';
            if (discount && discount !== 10) {
                text += `| ${discount}折`;
            }
            if (balance || balance === 0) {
                text += ` | 余额:￥${balance}`;
            }
            if (integral || integral === 0) {
                text += ` | 积分:${integral}`;
            }
            return text;
        },
    },
    props: {
        size: {
            type: String,
            default: 'small', // big small
        },
        isDisable: Boolean,
        name: String,
        balance: Number,
        level: Number,
        discount: {
            type: Number,
            default: 10,
        },
        isNormal: {
            type: Boolean,
            default: false,
        },
        haveButton: {
            type: Boolean,
            default: false,
        },
        buttonText: {
            type: String,
            default: '',
        },
        value: String,
        integral: [Boolean, Number], // 积分，传入数字则默认显示，传入布尔值，则判断是否显示
        cardId: [String, Number], // 唯一id，用于点击返回
    },
    methods: {
        click() {
            const { cardId } = this.$props;
            this.$emit('click', cardId);
        },
        buttonAction() {
            this.$emit('action');
        },
    },
};
</script>

<style lang="less">
.tech-member-card-list {
    .flex-row-between();
    align-items: center;
    position: relative;
    overflow: hidden;
    background-image: url('../../../assets/img/member-card-bg.png');
    background-repeat: no-repeat;
    background-size: 100%;
    .p-h(@gap-lg);
    .p-v(@gap);
    border-radius: @member-card-border-raduis;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    color: @card-color;
    &.is-normal {
        background-image: url('../../../assets/img/member-card-list-bg.png');
        color: @gray-444;
        .card-link {
            color: #737981;
        }
    }
    &.card-list-small {
        .card-name {
            .font-size-sm();
            font-weight: @font-weight-bold;
        }
    }
    &.card-list-big {
        .card-name {
            .font-size-md();
            font-weight: @font-weight-bold;
        }
    }
    .card-name {
        .flex();
        align-items: center;
        z-index: 2;
        .tech-icon {
            .m-r(@gap-sm);
        }
        .detail-info {
            .m-l(@gap-sm);
        }
    }
    .card-link {
        .flex-row-center();
        z-index: 2;
        color: #B79C74;
        .font-size-sm();
        border-top-left-radius: @member-card-border-raduis;
        .tech-icon {
            color: #B79C74;
            .m-l(@gap-sm);
        }
        .action-btn {
            border-radius: 15px;
            background-color: rgba(151,157,168,0.32);
            border: none;
            color: @white;
        }
    }
}
</style>

